<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; margin: 0">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ehcharts</title>
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%; width: 1300px"></div>

	<script type="text/javascript" src="<%=basePath%>echarts/echarts.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/theme/vintage.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/map/js/heilongjiang.js"></script>
	<script type="text/javascript">
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom,'vintage');
		option = null;
		$.ajax({
			type : 'GET',
			url : "<%=basePath%>base/citySum.ins",
			dataType : "json",
			success : function(data) {
				var x = [];
				var y = []
				var labelData = [];
				var max = -1;
				for (var i = 0; i < data.length; i++) {
					var value = data[i].value;
					var name = data[i].name;
					x.push(value);
					y.push(name);
					labelData.push({
						value: 1,
						name: name
					});
					if(value > max)
						max = value;
				}
				
				myChart.setOption({
					title : {
						text : '黑龙江各城市 基地数',
						subtext : '',
						x : 'center'
					},
					tooltip : {
						 trigger: 'item',
					     formatter: "{a} <br/>{b} : {c}"
					},
					grid : {
						right : '37%',
						top : 100,
						bottom : 40,
						width : '24%'
					},
					xAxis : {
						type : 'value',
						boundaryGap : [ 0, 0.01 ]
					},
					yAxis : {
						type : 'category',
						data : y
					},
					toolbox : {
						show : true,
						feature : {
							dataView : {
								readOnly : false
							},
							magicType : {
								show : true,
								type : [ 'line', 'bar' ]
							},
							restore : {},
							saveAsImage : {}
						}
					},
					visualMap : {
						min : 0,
						max : max+50,
						left : 'left',
						top : 'bottom',
						text : [ '高', '低' ], // 文本，默认为数值文本
						calculable : true
					},
					series : [ {
						name : '基地数量',
						type : 'map',
						mapType : '黑龙江',
						roam : false,
						label : {
							normal : {
								show : true
							},
							emphasis : {
								show : true
							}
						},
						left : 40,
						top : 100,
						bottom : 40,
						right : '68%',
						data : data
					}, {
						name : '基地数量',
						type : 'bar',
						label : {
							normal : {
								show : true,
								position : 'right'
							}
						},
						data : x
					}, {
						name : '基地数量',
				        type: 'pie',
				        data: data,
				        roseType: 'area',
				        center : [ '82%', '52%' ],
				        itemStyle: {
				            normal: {
				                color: 'white',
				            }
				        },
				        labelLine: {
				            normal: {
				                show: false
				            }
				        },
				        label: {
				            normal: {
				                show: false
				            }
				        },
				        tooltip : {
							 trigger: 'item',
						     formatter: "{a} <br/>{b} : {c} ({d}%)"
						}
				    }, {
				    	name : '基地数量',
				        type: 'pie',
				        data: labelData,
				        center : [ '82%', '52%' ],
				        radius: ['65%', '90%'],
				        zlevel: -2,
				        itemStyle: {
				            normal: {
				                color: '#22C3AA',
				                borderColor: 'white'
				            }
				        },
				        label: {
				            normal: {
				                position: 'inside'
				            }
				        },
				        tooltip : {
							 trigger: 'item',
						     formatter: "{b}"
						}
				    }]
				})
			},
			error : function(data) {
				alert("请检查网络连接");
			}
		});
	</script>
</body>
</html>